<template>
  <div style="margin-top: 10px;">
    <titleBox text="居民人群分析" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding: 20px 10px;border: 1px solid #11afc180;">
        <div style="padding:3px 5px; cursor: pointer;" :class="isChecked == i ? 'checked' : ''"
          v-for="(item, i) in data" :key="i" @click="checkThis(item, i)">
          <div class="item" @mouseenter="handleMouseEnter(i)">
            <div class="xh">No.{{ i + 1 }}</div>
            <div class="name">{{ item.name }}</div>
            <div class="rs">{{ item.count }}人</div>
            <div class="zb">占比{{ item.ratio }}%</div>
          </div>
          <!-- <div v-if="isChecked == i" class="checkedBt">
          <div style="background-image: url('/img/myimg/line.png'); background-size:100% 2px; width:100%; height:2px;">
          </div>
          <div style="display: flex; width:100%; align-items:center;">
            <div
              style="position:relative;display: flex;align-items:center; padding:5px 20px; flex:1; justify-content: space-between;">
              <div>
                <div class="checked_item_title">年同比增长</div>
                <div class="checked_item_rs">0人</div>
              </div>
              <div class="checked_item_bfb">
                +{{item.tb}}
              </div>
              <div
                style=" position:absolute; top:10px; right:10px; width:30px;height:30px; background-image:url('/img/myimg/xj.png'); background-size: 30px 30px;">
              </div>
            </div>
            <div
              style="position:relative; display: flex;align-items:center; padding:5px 20px; flex:1; justify-content: space-between;">
              <div>
                <div class="checked_item_title">年环比增长</div>
                <div class="checked_item_rs">0人</div>
              </div>
              <div class="checked_item_bfb">
                +{{ item.hb }}
              </div>
              <div
                style=" position:absolute; top:10px; right:10px; width:30px;height:30px; background-image:url('/img/myimg/ss.png'); background-size: 30px 30px;">
              </div>
            </div>
          </div> -->
          <!-- </div> -->
        </div>
      </div>
    </div>
    <rqModal ref="rqModalRef"></rqModal>
    <!-- <rqModal ref="rqModalRef" @rowClick="rqModalRowClick"></rqModal> -->
    <!-- <rqxqModal ref="rqxqModalRef" @close="rqxqModalClose"></rqxqModal> -->


  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue"
import $api from "@/utils/request.js"
import titleBox from "../mConponents/titleBox.vue"
import rqModal from "../mConponents/modal/rqModal.vue"
import rqxqModal from "../mConponents/modal/rqxqModal.vue"

const isChecked = ref(0)
const data = ref([])
const content = ref(null)
const height = ref(0)
const show = ref(false)
onMounted(() => {
  getData()
})
const getData = async () => {
  const res = await $api.get("/api/Screen/getCrowdAttributes")
  if (res.code === 1) {
    res.data.tag_statistics["8"].id = 8
    res.data.tag_statistics["9"].id = 9
    res.data.tag_statistics["10"].id = 10
    res.data.tag_statistics["11"].id = 11
    data.value.push(res.data.tag_statistics["8"])
    data.value.push(res.data.tag_statistics["9"])
    data.value.push(res.data.tag_statistics["10"])
    data.value.push(res.data.tag_statistics["11"])
    nextTick(() => {
      height.value = content.value.offsetHeight
      // show.value = true
    })
  }
}

const rqModalRef = ref(null)
const rqxqModalRef = ref(null)
const rqxqModalClose = () => {
  rqModalRef.value.show()
}
// const rqModalRowClick = (e) => {
//   rqxqModalRef.value.show(e)
//   rqModalRef.value.close()
// }
const checkThis = (item, i) => {
  rqModalRef.value.show(item)
  // rqModal.show = true
  // rqModal.title = item.name
  // isChecked.value = i
}
const handleMouseEnter = (i) => {
  isChecked.value = i
}

const showRqModal = (e) => {
  if (e) {
    rqModalRef.value.show(e)
  }
}
const closeRqModal = () => {
  rqModalRef.value.close()
}
defineExpose({ showRqModal, closeRqModal })
</script>
<style scoped lang="less">
.rqxqModal_tablebox {
  background: #4DDECF1A;
  padding: 10px 16px;
  border: 1px solid #4DDECF33;
  border-radius: 10px;
  width: 100%;
  margin-top: 10px;

  .rqxqModal_tablebox_title {
    color: #D5F2FF;
  }
}

.rqxqModal_infobox {
  background: #4DDECF1A;
  padding: 10px 16px;
  border: 1px solid #4DDECF33;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  color: #FFFFFF;
  width: 100%;

  .rqxqModal_info_item {
    width: 25%;
    margin-top: 5px;

    .rqxqModal_info_item_label {
      font-size: 10px;
    }

    .rqxqModal_info_item_value {
      font-size: 13px;
      // font-weight: bold;
    }
  }
}

.content {
  background-color: #001a1dcc;
  width: 330px;
  border-radius: 5px;
  margin-top: 5px;

  .checked {
    border: 2px solid rgba(87, 255, 255, 1);
    border-radius: 10px;
  }

  .checkedBt {
    width: 100%;
    padding: 2px 5px;
  }

  .checked_item_title {
    color: rgba(255, 255, 255, 1);
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 10px;
    line-height: 16.8px;
    letter-spacing: 0%;
  }

  .checked_item_rs {
    font-family: TCloudNumber;
    font-weight: 600;
    font-size: 14px;
    line-height: 20.91px;
    letter-spacing: 0%;
    padding: 0 5px 0 0;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
      linear-gradient(180deg, rgba(0, 204, 255, 0) 20.83%, rgba(27, 197, 227, 1) 89.58%);
  }

  .checked_item_bfb {
    font-family: TCloudNumber;
    font-weight: 400;
    font-size: 14px;
    line-height: 29.06px;
    letter-spacing: 0%;

  }

  .item {

    display: flex;
    align-items: center;
    padding: 2px 10px 2px 5px;
    background: linear-gradient(90deg,
        rgba(157, 245, 255, 0) 0%,
        rgba(157, 245, 255, 0) 50%,
        rgba(157, 245, 255, 0.5) 100%);
    border-radius: 0 20px 20px 0;

    .xh {
      color: rgba(255, 149, 0, 1);
      font-size: 12px;
    }

    .name {
      padding-left: 20px;
      color: rgba(193, 244, 255, 1);
      font-size: 12px;
      flex: 1;
    }

    .rs {
      color: rgba(255, 255, 255, 1);
      font-size: 12px;
      font-weight: bold;
    }

    .zb {
      padding-left: 20px;
      color: rgba(255, 255, 255, 1);
      font-size: 12px;
    }
  }
}
</style>
